<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        .block{
            width: 400px;height: 200px;
            display: block;
        }
    </style>
</head>
<body>
   <div class="block" style="background: linear-gradient(to right,red,blue)">
   </div>
   <div class="block" style="margin-top:20px;background: linear-gradient(to bottom right,red,blue)">
   </div>
   <div class="block" style="margin-top:20px; 
   background: linear-gradient(120deg,red,blue)">
       <span>角度</span>
   </div>
   <div class="block" style="margin-top:20px;height: 200px;
   background: linear-gradient(120deg,red,orange,yellow,green,blue,indigo,violet)">
       <span>角度,多色</span>
   </div>
   <div class="block" style="width: 400px;margin-top:20px;height: 200px;
   background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1))">
       <span>透明度</span>
   </div>

</body>
</html>